<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <image class="back-icon" src="/static/jiantou2_1.png"></image>
      <view class="search-container">
        <image class="search-icon" src="/static/Group_427319157.png"></image>
        <input class="search-input" placeholder="助教" placeholder-style="color: #999999;"/>
        <view class="search-button">
          <text class="search-text">搜索</text>
        </view>
      </view>
    </view>

    <!-- 标签页 -->
    <view class="tabs">
      <view class="tab-item active">综合</view>
      <view class="tab-item">订单</view>
      <view class="tab-item">卡片</view>
      <view class="tab-item">会员</view>
      <view class="tab-item">文档</view>
    </view>

    <!-- 本地应用轮播 -->
    <view class="local-apps">
      <text class="section-title">本地应用</text>
      <swiper class="apps-swiper" indicator-dots circular>
        <swiper-item v-for="(group, groupIndex) in appGroups" :key="groupIndex">
          <view class="apps-row">
            <view class="app-item" v-for="(app, index) in group" :key="index">
              <image class="app-icon" :src="app.icon"></image>
              <text class="app-name">{{ app.name }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 模糊搜索 -->
    <view class="fuzzy-search">
      <text class="section-title">模糊搜索</text>
      <view class="search-box">
        <input class="fuzzy-input" placeholder="会员余额怎么查？会员消费记录怎么查？" placeholder-style="color: #999999;"/>
        <image class="arrow-icon" src="/static/Group_427319276.png"></image>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-results">
      <text class="section-title">搜索结果</text>
      <view class="no-data">
        <image class="empty-icon" src="/static/d9f40bf65051cdfd8bfbc675fbbb2063e412ee9294e5-05yuPp_fw1200_1.png"></image>
        <text class="empty-text">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      // 将应用分组，每组4个，用于轮播
      const apps = [
        {
          name: '会员订单',
          icon: '/static/Group_427319272.png'
        },
        {
          name: '会员中心',
          icon: '/static/Group_427319269.png'
        },
        {
          name: '会员等级管理',
          icon: '/static/Group_427319270.png'
        },
        {
          name: '会员报表',
          icon: '/static/Group_427319273.png'
        },
        {
          name: '会员余额变动报表',
          icon: '/static/Group_427319274.png'
        }
      ];

      // 分组，每组4个应用
      const appGroups = [];
      while (apps.length > 0) {
        appGroups.push(apps.splice(0, 5));
      }

      return {
        appGroups
      };
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style lang="scss">
  .container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 30rpx;
  }

  // 顶部导航栏
  .top-bar {
    display: flex;
    align-items: center;
    height: 120rpx;
	box-sizing: border-box;
    // background-color: #f5f5f5;
    padding: 0 28rpx;
background: linear-gradient( 130deg, #1EBE76 0%, #8CE297 50%, #8FE676 100%);
    .back-icon {
      width: 52rpx;
      height: 52rpx;
      margin-right: 20rpx;
    }

    .search-container {
		width: 630rpx;
      flex: 1;
      display: flex;
      align-items: center;
      height: 72rpx;
      background-color: #ffffff;
      border-radius: 40rpx;
      padding-left:20rpx;
      // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .search-icon {
        width: 31rpx;
        height: 31rpx;
        margin-right: 18rpx;
      }

      .search-input {
        flex: 1;
        font-size: 24rpx;
        color: #333333;
      }

      .search-button {
        width: 126rpx;
        height: 60rpx;
        background-color: #1EBE76;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;

        .search-text {
          font-size: 28rpx;
          color: #ffffff;
          font-weight: bold;
        }
      }
    }
  }

  // 标签页
  .tabs {
	  // margin-top: 120rpx;
    display: flex;
    height: 90rpx;
    // background-color: #ccc;
    // border-bottom: 1rpx solid #f0f0f0;

    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #535353;
      position: relative;

      &.active {
       font-weight: 500;
       font-size: 32rpx;
       color: #1A1A1A;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background-color: #4cd964;
          border-radius: 3rpx;
        }
      }
    }
  }

  // 本地应用轮播
  .local-apps {
	  width: 710rpx;
	  height: 300rpx;
    margin: 0 20rpx;
	box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding:20rpx 36rpx;
    .section-title {
     font-weight: bold;
     font-size: 28rpx;
     color: #0A2016;
   
    
    }

    .apps-swiper {
		box-sizing: border-box;
		   margin-top: 22rpx;
      height: 212rpx;
	  // background-color: #ccc;
    }

    .apps-row {
      display: flex;
      justify-content: space-around;
      height: 100%;
      // align-items: center;
    }

    .app-item {
      width: 96rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
       
      .app-icon {
        width: 88rpx;
        height: 88rpx;
        margin-bottom: 8rpx;
      }

      .app-name {
        font-size: 24rpx;
        color:#333333;
        text-align: center;
        line-height: 30rpx;
      }
    }
  }

  // 模糊搜索
  .fuzzy-search {
	  box-sizing: border-box;
    margin: 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx 36rpx;

    .section-title {
      font-size:28rpx;
      color: #333333;
  
      font-weight: bold;
    }

    .search-box {
		    margin-top:22rpx;
      display: flex;
      align-items: center;
width: 648rpx;
height: 60rpx;
background: rgba(30,190,118,0.1);
border-radius: 104rpx 104rpx 104rpx 104rpx;
border: 1rpx solid #1EBE76;
      .fuzzy-input {
        flex: 1;
      font-size: 24rpx;
      color: #1EBE76;
      }

      .arrow-icon {
        width: 52rpx;
        height: 52rpx;
      }
    }
  }

  // 搜索结果
  .search-results {
	  box-sizing: border-box;
    margin: 0 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding:20rpx 36rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .section-title {
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 30rpx;
      font-weight: bold;
    }

    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 100rpx 0;

      .empty-icon {
        width: 272rpx;
        height: 272rpx;
        // margin-bottom: 30rpx;
        // opacity: 0.3;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999999;
      }
    }
  }
</style>
